import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';
import { map } from 'rxjs/operators';

export interface DataModel {
  id: number,
  name: string,
  data: TableModel[]
  show: boolean
}
export interface TableModel {
  id: number,
  name: string,
  data: RowData[]
  show: boolean
}
export interface RowData {
  id: string,
  description: string,
  mapApprove: boolean,
  mapAuthor: string,
  mapAuthorUrl: string,
  mapId: string,
  mapImgUrl: string,
  mapName: string,
  mapRate: number,
  mapUrl: string,
}
@Component({
  selector: 'app-map-daily',
  templateUrl: './map-daily.component.html',
  styleUrls: ['./map-daily.component.scss']
})
export class MapDailyComponent implements OnInit {

  /**
   * 显示的列
   *
   * @type {string[]}
   * @memberof MapDailyComponent
   */
  displayedColumns: string[] = [
    "id",
    "mapApprove",
    "mapAuthor",
    // "mapAuthorUrl",
    "mapId",
    "mapImgUrl",
    "mapName",
    "description",
    "mapRate",
    'mapUrl'
  ];
  public data!: DataModel[]
  public dataHigh!: any

  public password: string = ""
  public icon: string = ""
  public message: string = ""

  public showBigTab:number = 0

  public defaultImage = "https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=95916cc1f06fd309c8ffae59a34017f5&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fb151f8198618367ae6be84a62d738bd4b31ce592.jpg"

  constructor(
    public http: HttpClient
  ) { }

  ngOnInit() {
    // console.log(this.http);
    // this.http.get('/api/custom-map/').subscribe(res => {
    //   this.data = res
    // })
    this.http.get('/api/custom-map/').pipe(map((result: any) => {
      const data: DataModel[] = result || []
      return data
      // console.log(result);
    })).subscribe(res => {
      console.log(res);
      res.forEach(item => {
        item.data.forEach(_item => {
          _item.show = false
        })
      })
      res[0].show = true
      res[0].data[0].show = true
      this.data = res
    })

    this.http.get('/api/custom-map-high/').subscribe(res => {
      this.dataHigh = res
    })
  }
  setShowBigTab(e:MatTabChangeEvent){
    console.log(e);
    this.showBigTab = e.index
    if(this.data){
      this.data[e.index].show = true
      this.data[e.index].data[0].show = true
    }
  }
  setShowTab(e:MatTabChangeEvent){
    console.log(e);

    this.data[this.showBigTab].data[e.index].show = true
  }

  /**
   *
   * @param url 获取可跳转的地址
   * @returns
   */
  getRealUrl(url: string) {
    // return ""
    return "https://www.plazmaburst2.com/" + url
  }
  onClickFixButton(e: any) {
    this.icon = "cached"
    let data = {
      password: this.password
    }
    let headers = {
      headers: new HttpHeaders({
        'Content-Type': "application/json;charset=UTF-8"
      })
    };
    this.http.post(
      '/api/custom-map-refresh/',
      data,
      headers
    ).subscribe((res: any) => {
      console.log(res);
      if (res['flag']) {
        this.icon = "done"
      } else {
        this.icon = "clear"
      }
      this.message = JSON.stringify(res)
    })
  }
}
